<template>
  <div class="view-container">
    <el-form :model="queryParam" :pane="true">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="字典名称" prop="dictName">
            <el-input v-model="queryParam.dictKey" placeholder="字典键"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="字典类型" prop="dictType">
            <el-input v-model="queryParam.dictValue" placeholder="字典值"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <nebula-table :columns="columns" :data="tableData" header-row-class-name="header-row-class"
                  use-tool-bar border show-overflow-tooltip :total="rowsTotal" @change="changePage">
      <template #head-toolbar>
        <el-button type="primary" @click="handleCreate" size="small">新增</el-button>
      </template>
      <template #useTag="scope">
        <dict-tag :options="dictValue.yes_or_no" :values="scope.row.useTag"></dict-tag>
      </template>
      <template #tagType="scope">
        <el-tag :type="scope.row.tagType" v-if="scope.row.tagType" variant="light">{{ scope.row.dictValue }}</el-tag>
      </template>
      <template #operation="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </nebula-table>
    <el-dialog v-model="isShow" title="新增字典数据">
      <div class="view-container">
        <el-form :model="createParam" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="字典键" prop="dictKey">
                <el-input v-model="createParam.dictKey"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字典值" prop="dictValue">
                <el-input v-model="createParam.dictValue"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="使用标签" prop="useTag">
                <el-select v-model="createParam.useTag" placeholder="请选择" class="width-control"
                           allow-clear>
                  <el-option v-for="item in dictValue.yes_or_no" :value="item.dictKey"
                             :label="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="createParam.useTag==='1'">
              <el-form-item label="标签类型" prop="tagType">
                <el-select v-model="createParam.tagType" placeholder="请选择" class="width-control">
                  <el-option value="primary" label="primary"></el-option>
                  <el-option value="success" label="success"></el-option>
                  <el-option value="warning" label="warning"></el-option>
                  <el-option value="danger" label="danger"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" v-if="createParam.useTag==='1'">
              <el-tag :type="createParam.tagType" variant="light">{{ createParam.dictValue }}</el-tag>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="createParam.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="createCancel">取消</el-button>
        <el-button type="primary" @click="createSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {useRoute} from "vue-router";
import {createOrEditDictData, deleteDictData, getDictData} from "@/api/sysDict.js";
import DictTag from "@/components/DictTag.vue";
import {getDict} from "@/util/dict.js";
import NebulaTable from "@/components/NebulaTable.vue";
import {ElMessageBox, ElNotification} from "element-plus";
// import {layer} from "@layui/layui-vue";

defineOptions({
  name: 'dictDetail'
})
const dicts = ["yes_or_no"]
const route = useRoute()
const proxy = getCurrentInstance();
const dictValue = ref({})
const isShow = ref(false)

const queryParam = ref({
  dictKey: null,
  dictValue: null,
  typeId: route.params.dictId,
  pageNum: 1,
  pageSize: 10
})

const createParam = ref({
  typeId: route.params.dictId,
  dictKey: null,
  dictValue: null,
  useTag: '0',
  tagType: null,
  remark: null,
})

const tableData = ref([])
const rowsTotal = ref(0)
const columns = ref([
  {title: "创建时间", key: "createTime", align: "center"},
  {title: "字典键", key: "dictKey", align: "center"},
  {title: "字典值", key: "dictValue", align: "center"},
  {title: "使用标签", key: "useTag", align: "center", customSlot: 'useTag'},
  {title: "标签样式", key: "tagType", align: 'center', customSlot: 'tagType'},
  {title: "备注", key: "remark", align: 'center'},
  {title: "操作", customSlot: 'operation'}
])

const createSubmit = () => {
  createOrEditDictData(createParam.value).then(res => {
    if (res.code === 200) {
      isShow.value = false
      ElNotification({
        title: '操作成功',
        type: "success"
      })
      handleQuery()
    } else {
      ElNotification({
        title: '创建失败',
        message: res.msg,
        type: 'error',
      })
    }
  })
}

const createCancel = () => {
  isShow.value = false
  for (let key in createParam.value) {
    switch (key) {
      case "typeId":
        createParam.value[key] = route.params.dictId;
        continue;
      case "useTag":
        createParam.value[key] = 0;
        continue;
      default:
        createParam.value[key] = null;
    }
  }
}

const handleQuery = () => {
  getDictData(queryParam.value).then(res => {
    tableData.value = res.data.rows
    rowsTotal.value = res.data.total
  })
}

const resetParams = () => {
  for (let key in queryParam.value) {
    queryParam.value[key] = null;
  }
}


const changePage = (currentPage,pageSize) => {
  queryParam.value.pageNum = currentPage
  queryParam.value.pageSize = pageSize
  handleQuery()
}
const handleCreate = () => {
  isShow.value = true
}

const handleEdit = (row) => {
  handleCreate()
  createParam.value = {...row}
}

const handleDelete = (row) => {
  const confirmText = `确定要删除字典值为【${row.dictValue}】的数据吗?`
  ElMessageBox.confirm(
      confirmText,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    let param = {id: row.id}
    deleteDictData(param).then(res => {
      if (res.code === 200) {
        ElNotification({
          title: '操作成功',
          message: res.msg,
          type: 'success'
        })
      } else {
        ElNotification({
          title: '失败',
          message: res.msg,
          type: 'error'
        })
      }
      handleQuery()
    })
  })
}

onMounted(() => {
  handleQuery()
  dictValue.value = getDict({type: {dicts}})
})
</script>
